<template>
    <div>
        <el-card class="main_card">
           <!-- 搜索与添加区 -->
            <el-row :gutter="20" >
                <el-col :span="6"> 
                    <el-input placeholder="请输入内容"  clearable v-model="queryInfo.query" >
                        <el-button slot="append" icon="el-icon-search" @click=" getMerchantList" class="search_btn"></el-button>
                    </el-input>
                </el-col>
               <el-col :span="4">
                   <button  @click="addMerchant" class="add_btn">添加商户</button>
               </el-col>
            </el-row>
            <!-- 商品列表区 -->
            <el-table  :data="Merchantlist"  border stripe>       
                <el-table-column prop="strId" label="商户id"  width="200px" ></el-table-column>
                <el-table-column prop="username" label="商户名"  width="200px" ></el-table-column>
                <el-table-column prop="" label="商户头像"  width="200px" >
                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="" trigger="hover">
                            <img :src="scope.row.url" alt="" style="width: 150px;height: 150px">
                            <img slot="reference" :src="scope.row.url" style="width: 30px;height: 30px">
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="商户地址"  width="200px" ></el-table-column>
                <el-table-column  label="操作"  >
                    <template v-slot="scope">
                        <!-- 删除按钮 -->                        
                          <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="removeMerchant(scope.row.strId)" ></el-button>
                    </template>
                </el-table-column>
            </el-table>
             <!-- 分页区 -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
                :page-sizes="[5, 10, 15,20]"  :page-size="queryInfo.pagesize" layout="sizes, prev, pager, next, jumper" >
                </el-pagination> 
         </el-card>

         
    </div>
</template>

<script>
export default {
    data(){
        return{
            queryInfo:{
                pagenum:1,
                pagesize:10
            },
            Merchantlist:[],
        }
    },
    methods:{
        async getMerchantList(){
            const{data:res}=await this.$http.get('rent/Merchant/findByPage/'+this.queryInfo.pagesize+'/'+this.queryInfo.pagenum);         
            if(res.code!=200)
                return this.$message.error("获取商品列表失败!");
                console.log(res)
                console.log(res.data.data)
            this.Merchantlist=res.data.data;
        },
        handleSizeChange(newSize){
          this.queryInfo.pagesize=newSize;
          this.getMerchantList();
        },
        handleCurrentChange(newNum){
          this.queryInfo.pagenum=newNum;
          this.getMerchantList();
      },
      async removeMerchant(id)
      {
          const {data:res}=this.$http.delete('rent/Merchant/delete/'+id);
          if(res.code==200)
          {
              this.$message.success('删除成功!')
          }
      },
      addMerchant()
      {

      }
    },
    created(){
        this.getMerchantList();
    }
}
</script>

<style lang="less" scoped>
.el-table
{
    margin-top: 15px;
    font-size: 12px;
}
.el-input
{

}
.add_btn
{
    border-radius:25px;
    height:40px;
    width:120px;
    font-weight:500;
    font-size:16px;  
    background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);
    border:none;
    transition: 0.3s;
    cursor: pointer;
    color: #909399;
    &:hover{
        transform: scale(1.1);
        
    }
}
/deep/.el-input__inner
{
    border-radius: 15px;

}
</style>